<template>
	<view class="page-container">
		<scroll-view scroll-y class="scroll-container">
			<view class="content">
				<view class="card">
					<view class="card-title">{{name}}</view>
					<swiper circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
						:duration="duration" class="swiper-container">
						<swiper-item class="swiper-item">
							<image src="/static/city1.png" mode="widthFix" class="swiper-img"></image>
						</swiper-item>
						<swiper-item class="swiper-item">
							<image src="/static/city2.jpg" mode="widthFix" class="swiper-img"></image>
						</swiper-item>
						<swiper-item class="swiper-item">
							<image src="/static/city3.jpg" mode="widthFix" class="swiper-img"></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="card">
					<view class="card-title">泉州介绍</view>
					<view class="card-title">海上丝绸之路起点-泉州</view>
					<view class="card-margin-bottom">历史文化：泉州是国务院首批公布的24个历史文化名城之一，是古代“海上丝绸之路”起点，宋元时期被誉为“东方第一大港”。</view>
					<view class="card-margin-bottom">著名景点：清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</view>
					<view class="card-margin-bottom">特色文化：拥有<text class="text-color">南音</text>、<text
							class="text-color">木偶戏</text>和<text class="text-color">闽南建筑</text>等丰富的非物质文化遗产。</view>
				</view>
				<view class="card">
					<view class="card-title">探索进度</view>
					<view class="card-margin-bottom">当前进度：{{progress}}%</view>
					<view>
						<slider :value="progress" @change="onsliderChange" show-value="false"></slider>
					</view>
				</view>
				<view class="card">
					<view class="card-title">选择城市</view>
					<picker mode="region" @change="onRegionChange" :value="selectedRegion">
						<view class="picker-display">
							当前选择：{{selectedRegion[0]}}-{{selectedRegion[1]}}-{{selectedRegion[2]}}</view>
					</picker>
				</view>
				<view class="card">
					<view class="card-title">泉州宣传</view>
					<view class="video-wrapper">
						<video class="video-content" src="/static/city-video.mp4" object-fit="contain" controls></video>
					</view>
				</view>
				<view class="card">
					<view class="card-title">泉州背景音乐</view>
					<!-- 音频控制按钮：绑定播放/暂停事件，通过isPlaying切换文字 -->
					<button @click="playMusic" class="music-btn" :key="isPlaying">
						{{ isPlaying ? '暂停音乐' : '播放音乐' }}
					</button>
				</view>
				<!-- 偏好设置卡片（探索半径与探索进度交互一致） -->
				<view class="card">
					<view class="card-title">偏好设置</view>
					<view class="preference-item">
						<view class="preference-label">出行方式:</view>
						<radio-group @change="onTravelModeChange">
							<radio :value="'bus'" :checked="travelMode === 'bus'">公交</radio>
							<radio :value="'drive'" :checked="travelMode === 'drive'">自驾</radio>
							<radio :value="'walk'" :checked="travelMode === 'walk'">步行</radio>
						</radio-group>
					</view>
					<view class="preference-item">
						<view class="preference-label">显示推荐景点:</view>
						<switch :checked="showRecommend" @change="onShowRecommendChange"></switch>
					</view>
					<view class="preference-item">
						<view class="card-margin-bottom">探索半径: {{exploreRadius}}km</view>
						<slider :value="exploreRadius" :min="0" :max="100" @change="onExploreRadiusChange" show-value="false"></slider>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPlaying: false, // 音频播放状态标识
				audioContext: null, // 音频上下文实例（全局存储）
				name: '泉州风光',
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 600,
				progress: 60,
				selectedRegion: ['福建省', '泉州市', '丰泽区'],
				travelMode: 'bus',
				showRecommend: true,
				exploreRadius: 10 
			}
		},
		onLoad() {
			// 页面加载时初始化音频
			this.initAudio();
		},
		methods: {
			// 初始化音频配置：创建实例、绑定状态监听、设置音频源
			initAudio() {
				this.audioContext = uni.createInnerAudioContext(); // 创建音频上下文实例
				this.audioContext.src = '/static/city-music.mp3'; // 设置本地音频路径
				
				// 监听播放成功事件，强制更新播放状态
				this.audioContext.onPlay(() => {
					this.$set(this, 'isPlaying', true);
				});
				
				// 监听暂停成功事件，强制同步播放状态
				this.audioContext.onPause(() => {
					this.$set(this, 'isPlaying', false);
				});
				
				// 监听播放结束，重置播放状态
				this.audioContext.onEnded(() => {
					this.$set(this, 'isPlaying', false);
					uni.showToast({ title: '音乐播放完毕', icon: 'none' });
				});
				
				// 监听音频错误，重置播放状态并提示
				this.audioContext.onError((err) => {
					this.$set(this, 'isPlaying', false);
					uni.showToast({ title: `音频错误：${err.errMsg}`, icon: 'none' });
				});
			},
			onsliderChange(e) {
				this.progress = e.detail.value;
			},
			// 播放/暂停音乐：判断实例存在性，控制播放/暂停逻辑并更新状态
			playMusic() {
				// 确保音频实例存在，不存在则重新初始化
				if (!this.audioContext) {
					this.initAudio();
				}

				if (!this.isPlaying) {
					// 播放逻辑：调用play方法，成功后更新状态并提示
					this.audioContext.play().then(() => {
						this.$set(this, 'isPlaying', true);
						uni.showToast({ title: '音乐播放中' });
					}).catch((err) => {
						uni.showToast({ title: `播放失败：${err.errMsg}`, icon: 'none' });
					});
				} else {
					// 暂停逻辑：调用pause方法，更新状态并提示
					this.audioContext.pause();
					this.$set(this, 'isPlaying', false);
					uni.showToast({ title: '音乐已暂停' });
				}
			},
			onRegionChange(e) {
				this.selectedRegion = e.detail.value;
			},
			onTravelModeChange(e) {
				this.travelMode = e.detail.value;
			},
			onShowRecommendChange(e) {
				this.showRecommend = e.detail.value;
			},
			onExploreRadiusChange(e) {
				this.exploreRadius = e.detail.value;
			}
		},
		onUnload() {
			// 页面关闭时销毁音频，释放手机资源
			if (this.audioContext) {
				this.audioContext.destroy();
			}
		}
	}
</script>

<style scoped>
	.page-container {
		width: 100vw;
		min-height: 100vh;
		background-color: #f5f7fa;
	}
	.scroll-container {
		width: 100%;
		padding: 30rpx 0;
	}
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
	}
	.card {
		width: 690rpx;
		border-radius: 24rpx;
		padding: 24rpx;
		background: #ffffff;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
		margin-bottom: 30rpx;
	}
	.card-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #1d2129;
		margin-bottom: 20rpx;
	}
	.card-margin-bottom {
		margin-bottom: 20rpx;
	}
	.swiper-container {
		width: 100%;
		height: 420rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}
	.swiper-item {
		width: 100%;
		height: 100%;
	}
	.swiper-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.text-color {
		color: #007AFF;
	}
	.video-wrapper {
		width: 100%;
		height: 360rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #f5f5f5;
		border-radius: 16rpx;
		overflow: hidden;
	}
	.video-content {
		width: 100%;
		height: 100%;
	}
	.music-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #007AFF;
		color: #fff;
		border-radius: 12rpx;
		font-size: 28rpx;
	}
	.picker-display {
		font-size: 26rpx;
		color: #666;
		padding: 16rpx 0;
		border: 1rpx solid #eee;
		border-radius: 12rpx;
	}
	uni-swiper-indicator {
		bottom: 20rpx !important;
	}
	uni-swiper-indicator-dot {
		width: 16rpx !important;
		height: 16rpx !important;
		margin: 0 8rpx !important;
		background-color: rgba(255, 255, 255, 0.5) !important;
	}
	uni-swiper-indicator-dot-active {
		width: 36rpx !important;
		border-radius: 8rpx !important;
		background-color: #ffffff !important;
	}
	
	/* 偏好设置新增样式 */
	.preference-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}
	.preference-label {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
	}
	radio-group {
		display: flex;
		align-items: center;
	}
	radio {
		margin: 0 20rpx;
		font-size: 28rpx;
	}
	switch {
		transform: scale(0.8);
	}
	slider {
		width: 100%;
	}
</style>